<template>
  <div class="login">
    <Header title="用户登录"></Header>
    <section>
      <div class="login-tel">
        <input type="text" v-model="userTel" placeholder="输入手机号" pattern="[0-9]*" />
      </div>
      <div class="login-pwd">
        <input type="password" v-model="userPwd" placeholder="输入密码" />
      </div>
      <div class="login-btn" @click="goLogin">登录</div>
      <div class="tab">
        <span @click="goModify">修改密码</span>
        <span @click="goRegister">快速注册</span>
      </div>
    </section>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue'
import Header from '@/components/My/Header.vue'
import { showToast } from 'vant'
import userService from '@/common/service/user.service'
import { useRouter } from 'vue-router'
import { useAppStore, useUserStore } from '@/stores'
const login = defineComponent({
  name: 'Login',
  // 组件的其他选项...
})
const sStore = useAppStore()
const userStore = useUserStore()
onMounted(() => {
  sStore.setTabbarStatus(false)
})
onBeforeUnmount(() => {
  sStore.setTabbarStatus(true)
})
const userTel = ref('13510129004')
const userPwd = ref('123456')

const goLogin = async () => {
  //校验表单
  if (!userService.validateUserTel(userTel.value)) return
  if (!userService.validateUserPwd(userPwd.value)) return

  //登录请求
  userService.login(userTel.value, userPwd.value).then((result) => {
    if (result.code === 200) {
      userStore.userLogin(result?.data)
      showToast(result.message)
      updateUserInfo(result?.data)
      router.push('/')
    } else {
      showToast(result.message)
    }
  })
}

const updateUserInfo = (userInfo) => {}
const router = useRouter()
const goRegister = () => {
  router.push('/register')
}
const goModify = () => {
  router.push('/modify')
}
</script>

<style scoped>
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}

section > div {
  margin: 0.266666rem 0;
  width: 8.933333rem;
  height: 1.173333rem;
}

section input {
  box-sizing: border-box;
  padding: 0 0.266666rem;
  line-height: 1.173333rem;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 6px;
}

section .login-tel {
  margin-top: 0.8rem;
}

section .login-tel input {
  width: 8.933333rem;
}

section .login-pwd {
  margin-top: 0.8rem;
}

section .login-pwd input {
  width: 8.933333rem;
}

section .login-btn {
  line-height: 44px;
  color: #fff;
  text-align: center;
  background-color: #ff5777;
  border-radius: 6px;
}

section .tab {
  display: flex;
  justify-content: space-between;
  font-size: 0.373333rem;
}
</style>
